<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增课程</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
</head>
<body style="padding:8px;">
<h3 class="title">新增课程</h3>
<img id="textbookPic"
     alt="默认教材封面"
     width="300"
     height="250"
     style="float:right" th:src="@{/pics/SpringBoot.png}"/><br/>
[[${error}]]
<form th:action="@{/course/create}" method="post" enctype="multipart/form-data" th:object="${course}">
    <div>
        <span>课程编号:</span>
        <input type="text" name="no" required><span></span>
    </div>
    <div>
        <span>课程名称:</span>
        <input type="text" name="name" required>
    </div>
    <div>
        <span>教材封面:</span>
        <input id="coursetextbookpic" type="file" name="coursetextbookpic" size="40"/>
    </div>
    <div>
        <span>课程课时:</span>
        <input type="text" name="hours" required>
    </div>
    <div>
        <span>课程学分:</span>
        <input type="text" name="point" required>
    </div>
    <div>
        <span>课程类型:</span>
        <select name="typeId">
            <option value="-1">=请选择=</option>
            <option th:each="list:${courseTypeList}" th:value="${list.id}" th:text="${list.name}"></option>
        </select>
    </div>
    <div>
        <span>课程状态:</span>
        <input type="radio" name="status" th:value="0" checked>开放公选&nbsp;&nbsp;
        <input type="radio" name="status" th:value="1">暂不开放&nbsp;&nbsp;
        <input type="radio" name="status" th:value="2">停止授课&nbsp;&nbsp;
    </div>
    <div>
        <span>选课条件:</span>
        <input type="checkbox" name="courseReqs" value="0"/>大三以上
        <input type="checkbox" name="courseReqs" value="1"/>平均成绩80分
        <input type="checkbox" name="courseReqs" value="2"/>非本专业学生
        <input type="checkbox" name="courseReqs" value="3"/>未拖欠学费
    </div>
    <div>
        <span>备注说明:</span>
        <textarea name="memo" rows="6" cols="60" required></textarea>
    </div>

    <div>
        <input type="submit" value="开设课程"/>
    </div>
</form>
</body>
<script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
<script th:inline="javascript">
    $(function () {
        $("#coursetextbookpic").change(function (e) {
            for (var i = 0; i < e.target.files.length; i++) {
                var file = e.target.files.item(i);
                var freader = new FileReader();
                freader.readAsDataURL(file);
                freader.onload = function (e) {
                    var src = e.target.result;
                    $("#textbookPic").attr("src", src);
                }
            }
        });
        $("input[name=no]").blur(function () {
            $.ajax({
                url: "/course/selCourseNo/" + $(this).val(),
                type: "get",
                success: function (data) {
                    $("input[name=no]").next("span").text(data);
                }
            });
            // $.getJSON("/course/selCourseNo/"+$(this).val(),"",function (data) {
            //     // alert(data);
            //     $(this).next("span").text(data);
            // });
        });

        $("form").submit(function () {
            var yn = false;
            if ($("select[name=typeId]").val() == "-1")
                alert("请选择课程类型");
            else if ($("input[name=courseReqs]:checked").length <= 0)
                alert("请选择选课条件");
            else
                yn = true
            return yn
        });
    });

</script>
</html>